<template>
  <div class="my">
    <div
      class="my-top"
      :style="{
        backgroundImage:
          'url(' + require('@/assets/images/bg_profile.bd497b5a.jpg') + ')',
      }"
    >
      <div class="logo">
        <img src="@/assets/images/2.png" alt="" />
        <div class="name">{{ this.$store.state.name }}</div>
      </div>
    </div>
    <div class="my-nav">
      <ul class="tab-tilte">
        <li @click="cur = 0" :class="{ active: cur == 0 }">我收藏的歌曲</li>
        <li @click="cur = 1" :class="{ active: cur == 1 }">我收藏的歌单</li>
        <li @click="cur = 2" :class="{ active: cur == 2 }">我关注的歌手</li>
      </ul>
      <div class="tab-content">
        <div v-show="cur == 0">
          <div class="collect-music">
            <div class="music-top">
              <div class="song">歌曲</div>
              <div class="singer">歌手</div>
              <div class="album">专辑</div>
              <div class="timer">时长</div>
              <div></div>
            </div>
            <div class="music-conent">
              <div class="item" v-for="(item, index) of music" :key="item.id">
                <div class="song-bot">
                  <span>{{ index + 1 }}</span>
                  <div class="song-name">
                    <a href="##" @click="handlePlay(item.id)">{{
                      item.name
                    }}</a>
                    <div class="box">
                      <a href="##">
                        <span
                          class="iconfont icon-xiai"
                          @click="handleCollect(item)"
                        ></span>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="singer">{{ item.ar[0].name }}</div>
                <div class="album">{{ item.name }}</div>
                <div class="timer">{{ item.dt | handleTime }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="cur == 1">
          <div class="song-list">
            <div class="list-top">
              <div class="list">歌单</div>
              <div class="trackNumber">曲目数</div>
              <div class="creator">创建人</div>
              <div class="listen">收听</div>
            </div>
            <div class="list-item" v-for="item of list" :key="item.id">
              <div class="list-bot">
                <div class="img">
                  <img :src="item.coverImgUrl" alt="" />
                </div>
                <div class="list-name">
                  <a href="##" @click="handleList(item.id)">{{ item.name }}</a>
                </div>
              </div>
              <div class="trackNumber">{{ item.trackCount }}首</div>
              <div class="creator">{{ item.creator.nickname }}</div>
              <div class="listen lis">{{ item.playCount | handleNum }}万</div>
            </div>
          </div>
        </div>
        <div v-show="cur == 2">
          <div class="singer">
            <div
              class="singer-item"
              v-for="item of singer"
              :key="item.id"
              @click="handleDetail(item.id)"
            >
              <img :src="item.cover" alt="" />
              <div class="singe-name">{{ item.name }}</div>
              <div class="pay">
                <span class="iconfont icon-xiai"></span><a href="##">已关注</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cur: 0,
      music: [],
      list: [],
      singer: [],
    };
  },
  mounted() {
    this.$https.get(`/collect`).then((res) => {
      // console.log(res);
      this.list = res.data;
    });
    this.$https.get(`/singercollect`).then((res) => {
      // console.log(res);
      this.singer = res.data;
    });
    this.$https.get("/music").then((res) => {
      this.music = res.data;
    });
  },
  methods: {
    handleDetail(val) {
      console.log(val);
      this.$router.push(`/singerdetail?id=${val}`);
    },
    handleList(val) {
      this.$router.push(`/songdetail?id=${val}`);
    },
    handlePlay(val) {
      this.$router.push(`play?id=${val}`);
    },
  },
};
</script>

<style scoped>
.my {
  width: 1200px;
  margin: 0 auto;
  padding: 6px;
}
.my-top {
  position: relative;
  height: 350px;
  z-index: -200;
}
.logo {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: pink;
  border-radius: 50%;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
}
.logo img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
}
.name {
  margin-top: 10px;
  font-size: 30px;
  text-align: center;
  color: #fff;
}
.attention {
  margin-top: 10px;
  color: #fff;
  /* display: flex;
  justify-content: space-between; */
}
.attention div {
  text-align: center;
}

.tab-tilte {
  overflow: hidden;
}
.tab-tilte li {
  float: left;
  /* width: 25%; */
  padding: 10px 30px;
  text-align: center;
  /* background-color: #f4f4f4; */
  cursor: pointer;
}
/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active {
  background-color: #09f;
  color: #fff;
}
.tab-content > div {
  padding: 10px 30px;
}
.music-top {
  display: flex;
  line-height: 40px;
}
.song {
  margin-left: 40px;
  width: 500px;
}
.song-name {
  width: 500px;
  display: flex;
  justify-content: space-between;
}
.song-name a:hover {
  color: #09f;
}
.singer {
  width: 270px;
}
.album {
  width: 270px;
}
.timer {
  color: #c9c9c9;
}
.item {
  font-size: 14px;
  display: flex;
  line-height: 40px;
}
.song-bot {
  width: 540px;
  display: flex;
}
.song-bot span {
  width: 40px;
  color: #c9c9c9;
}
.list-top {
  display: flex;
  line-height: 70px;
}
.list {
  width: 600px;
}
.trackNumber {
  width: 250px;
}
.creator {
  width: 240px;
}
.list-item {
  display: flex;
  line-height: 70px;
  font-size: 14px;
}
.list-bot {
  width: 600px;
  display: flex;
  align-items: center;
}
.img {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  background-color: pink;
}
.img img {
  width: 50px;
  height: 50px;
}
.listen {
  width: 100px;
}
.lis {
  color: #999;
}
.singer {
  display: flex;
}
.singer-item {
  margin-right: 40px;
  width: 150px;
  text-align: center;
}
.singer-item img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: pink;
}
.singe-name {
  margin-top: 10px;
}
.pay {
  /* width: 120px; */
  padding: 10px 30px;
  border: 1px solid #333;
  margin-top: 15px;
}
.box {
  width: 70px;
  /* display: none; */
}
.song-item:hover .box {
  display: block;
}
.box span {
  margin-left: 10px;
}
.box .icon-xiai {
  color: red;
}
.back {
  padding: 5px 10px;
  background: red;
  border-radius: 5px;
}
</style>